<template>
    <div id="System">
        <el-container>
            <el-header>
                <div class="logo">
                    <img src="../assets/images/logo-500px.png" alt="logo" />
                </div>
                <div class="userInfo">
                    <span>欢迎【】登录</span> <i>退出</i>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px"><LiftNav /></el-aside>
                <el-container class="section">
                    <div class="Main-top">面包屑</div>
                    <el-main> <router-view /> </el-main>
                    <el-footer
                        >蜗牛金融后台管理系统 ©2021 Created by Ant
                        UED</el-footer
                    >
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import LiftNav from "../components/LiftNav";
export default {
    components: {
        LiftNav,
    },
};
</script>

<style lang='scss'  scoped>
.el-container {
    height: calc(100vh - 60px);
}
.el-header {
    background-color: #001529;
    color: #fff;
    line-height: 60px;
}
.logo {
    float: left;
}
.logo img {
    width: 185px;
    margin-top: 6px;
}
.userInfo {
    float: right;
}
.userInfo span {
    margin-right: 10px;
}
.userInfo i {
    cursor: pointer;
}
.el-footer {
    background-color: #e9eef3;
    color: #cad6e4;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    height: 40px !important;
}

.el-aside {
    background-color: #04192c;
    color: #333;
    text-align: center;
    overflow-y: auto;
    &::-webkit-scrollbar {
        //先改变body的滚动条宽度
        display: none;
        right: -5px;
        width: 2px;
    }
    &::-webkit-scrollbar-track {
        //再改变body的滚动条轨道颜色
        background: #04192c;
        border-radius: 5px;
    }
    &::-webkit-scrollbar-thumb {
        //最后改变body的滚动条滑轨相关的样式
        background: #275f94;
        border-radius: 5px;
    }
}
.section {
    padding: 24px;
    padding-bottom: 0;
    padding-top: 0;
    background-color: #e9eef3;
}
.Main-top {
    height: 50px;
    line-height: 50px;
}
.el-main {
    background-color: #fff;
    color: #333;
    padding: 0;
}
</style>
